@import 'src/node_modules/static/www/css/mixin';

#task_new_demand_list {
  background-color:#f7faff;
  padding-top:40px;
  min-height:840px;
  .all-demand{
    height:120px;
    border-radius: 4px;
    display:-webkit-flex;
    display:flex;
    justify-content:space-between;
    align-items: flex-end;
    padding:0 204px 0 40px;
    h4{
      display: inline-block;
      height:120px;
      line-height: 120px;
      font-size: 20px;
      color: $black;
      letter-spacing: 0;
      margin: 0;
    }
    .all-demand-step{
      display: inline-block;
      display:-webkit-flex;
      display:flex;
      justify-content:space-between;
      align-items: flex-end;
      height:120px;
      line-height: 120px;
      width: 618px;
      .steps{
        display: inline-block;
        position: relative;
        top: -50%;
        transform: translate(0, 50%);
      }
      .steps span:first-of-type{
        display: block;
        font-size: 14px;
        color: $gray;
        letter-spacing: 0;
        height:20px;
        line-height: 20px;
        text-align: center;
      }
      [class^="steps-"]{
        display: block;
        font-size: 28px;
        color: $black;
        letter-spacing: 0;
        height:40px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
  .demand-list-title{
    background-color:#f7faff;
    font-family: PingFangSC-Thin;
    font-size: 24px;
    color: #333;
    letter-spacing: 0;
    margin-top: 66px;
    height: 45px;
    line-height: 45px;

    .btn {
      float: right;
      width: 140px;
      height: 45px;
      background: $blue;
      border-radius: 2px;
      padding: 0;
      margin: 0 0 0 0;
      font-weight:600;
    }
  }
  .no-demand{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align:center;
    h2{
      font-family: PingFangSC-Thin;
      font-size: 40px;
      color: $black;
      letter-spacing: 0;
      margin: 0;
    }
    .btn {
      width: 140px;
      height: 45px;
      background: $blue;
      border-radius: 2px;
      padding: 0;
      margin: 68px 0 0 0;
      font-weight:600;
    }
  }
  .has-demand{
    background-color:#f7faff;
    margin-top:46px;
  }
  .demand-list{
    display:-webkit-flex;
    display:flex;
    justify-content:space-between;
    align-items: flex-end;
    height:120px;
    width:1320px;
    background: #FFFFFF;
    border: 1px solid $backblue;
    box-shadow: 0 2px 6px 0 rgba(227,232,238,0.70);
    border-radius: 4px;
    padding:0 40px;
    margin-bottom:25px;
    .demand-name{
      height:120px;
      line-height:120px;
      .icon-xiangmu{
        display: inline-block;
        height: 120px;
        line-height: 120px;
        vertical-align: top;
        color:$blue;
        font-size: 40px;
        margin-right:20px;
      }
      .demand-name-span{
        display: inline-block;
        height: 120px;
        line-height: 120px;
        vertical-align: top;
        font-size: 18px;
        color: $black;
        letter-spacing: 0;
      }
    }
    .demand-state{
      height:120px;
      line-height:120px;
      width:850px;
    }
  }
  ///////////////////////////////////////////////////////////////////////
  .active{
    border:none!important;
    background-color: $blue!important;
    color: $blue!important;
  }
  #progressBar{
    width: 93%;
    height: 50px;
    position: relative;
    margin-left: 22px;
    margin-top: 50px
  }
  #progressBar div{
    width: 100%;
    height: 1px;
    position: absolute;
    top:50%;
    left: 0;
    margin-top:-20px;
    border:1px solid #e3e8ee;
  }
  #progressBar div span{
    position: absolute;
    display: inline-block;
    background: $blue;
    height: 6px;
    width: 26%;
    top:-2px;
  }
  #progressBar>span{
    position: absolute;
    //top: 4px;
    width: 14px;
    height: 14px;
    border: 1px solid $backblue;
    border-radius: 50%;
    //margin-left: -7px;
    color: #fff;
  }
  #progressBar>span:nth-child(1){
    left: 0%;
  }
  #progressBar>span:nth-child(2){
    left: 0%;
    background:$blue;
  }
  #progressBar>span:nth-child(3){
    left: 25%;
  }
  #progressBar>span:nth-child(4){
    left: 50%;
  }
  #progressBar>span:nth-child(5){
    left: 75%;
  }
  #progressBar>span:nth-child(6){
    left: 100%;
  }
  .stepIco{
    border-radius:1em;
    padding:0.03em;
    background-color:#fff;
    text-align:center;
    line-height:1.5em;
    color:#fff;
    position:absolute;
    width:1.4em;
    height:1.4em;
  }
  .stepText{
    margin-top: 15px !important;
    width: 7em !important;
    text-align: center;
    margin-left: -43px;
    background-color: #fff !important;
    border: none !important;
    font-family: PingFangSC-Thin;
    font-size: 14px;
    color: #999;
    letter-spacing: 0;
  }
  ////////////////////////////////////////////////////////
}